//引入样式
require('../../assets/css/normalize.css')
require('../../assets/css/reset.css')
require('../../assets/fonts/iconfont.css');
require('./sports_course_play.less');

//引入模块
let axios = require('../../utils/axios.js')
let dom = require('../../utils/dom.js')

document.addEventListener("DOMContentLoaded", function () {
    //返回
    dom.get('.back').addEventListener('click', function () {
        history.back()
    })
    //获取视频文件渲染到页面
    let n = 0
    let videoFlies = JSON.parse(localStorage.getItem('fragments'))
    let timer
    let video = dom.get('#video')

    function play () {
        dom.get('.part').textContent = n + 1
        dom.get('.totalpart').textContent = videoFlies.length
        dom.get('.title').textContent = videoFlies[n].title
        video.src = axios.defaults.baseURL + videoFlies[n].videoUrl
        video.play()
        timer = setInterval(function () {
            dom.get('.Progress').style.width = 100 * video.currentTime / video.duration + `%`
        }, 50)
    }
    play();
    //自动播放到下一节
    video.addEventListener('ended', function () {
        n++;
        if (n < videoFlies.length) {
            play();
        } else {
            n = videoFlies.length - 1
            alert("训练结束,下次再来")
            //上传运动数据
        }
    })

    //播放上一节
    dom.get('.icon-jiantou_up').addEventListener('click', function () {
        if (--n >= 0) {
            play()
        } else (
            n = 0,
            play()
        )
        console.log(n);
    })

    //播放下一节
    dom.get('.icon-jiantou_next').addEventListener('click', function () {
        if (++n < videoFlies.length) {
            play()
        } else (
            n = videoFlies.length - 1
        )
        console.log(n);
    })

    //点击暂停出现蒙层并且视频暂停播放
    dom.get('.icon-zanting').addEventListener('click', function () {
        video.pause()
        dom.get('.mask_box').style.display = "block"
        dom.get('.mask').style.display = "block"
        dom.get('.titlemini').textContent = videoFlies[n].title
        dom.get('.mask_box_img').src = axios.defaults.baseURL + videoFlies[n].imgUrl
    })
    //点击蒙层视频播放并且蒙层消失
    dom.get('.mask').addEventListener('click', function () {
        dom.get('.mask').style.display = "none"
        dom.get('.mask_box').style.display = "none"
        video.play()
    })
    //点击继续训练
    dom.get('.continue').addEventListener('click', function () {
        dom.get('.mask').style.display = "none"
        dom.get('.mask_box').style.display = "none"
        video.play()
    })

    //点击结束训练上传运动数据
    dom.get('.over').addEventListener('click', function () {
        alert('恭喜锻炼结束,下次再来呀')
        location = './sports_course.html'
    })

})